import React, { useEffect, useState } from 'react'

// 需求: 每当我点击按钮+1时, 控制打印当前count ====>>>> 副作用需求 => useEffect
export default function App() {
  const [count, setCount] = useState(0)
  const [money, setMoney] = useState(1000)
  useEffect(() => {
    // 在这个回调函数中处理副作用逻辑
    // 将来会在组件渲染完成之后执行
    // 这个相当于 class类组件的 commponentDidmount + commponentDidUpdate
    console.log('count====>>>', count)
  })

  // 明确需求: 希望count 变化时, 才可以触发控制台的打印
  // 参数2: 表示回调函数触发的依赖项
  // useEffect(() => {
  //   console.log('count=====>>>>>', count)
  // }, [count])

  // 需求: 组件一加载, 控制台打印你好
  // 参数2 如果设置成了 [] 那么回调函数只会在组件初始渲染时执行一次
  // 要正确的设置依赖项
  // useEffect(() => {
  //   console.log('只需要组件加载的时候触发', count)
  // }, [])

  // 最佳实践: 希望一个功能的副作用放在一个useEffrect中, 不同的副作用拆分到不同的useEffect中, 可以有多个useEffect

  const clickHandler = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>计数器 {count}</h1>
      <button onClick={clickHandler}>+1</button>
      <hr />
      <h1>花钱 {money}</h1>
      <button onClick={() => setMoney(money - 100)}>花钱</button>
    </div>
  )
}
